<template>
  <div class="media_box">
    <div id="vditor" ref="vditorRef"></div>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'

import VditorPreview from 'vditor/dist/method.min'
import { useDark } from '@vueuse/core'
const isDark = useDark()
const vditorRef = ref(null)
const props = defineProps({
  mdStr: {
    type: String,
    
    default: '',
  },
})

const renderMd = () => {
  const currentTheme = isDark.value ? 'dark' : 'light'
  VditorPreview.preview(vditorRef.value, props.mdStr, {
    mode: 'dark',
    theme: {
      current: currentTheme,
    },
  })
}

watch(
  () => isDark.value,
  () => {
    nextTick(renderMd)
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped></style>
